
<template>
  <view>
    <!-- 触发按钮 -->
    <button @click="showPopup = true">点击分享</button>

    <!-- 弹窗组件 -->
    <uni-popup ref="popup" type="center" :mask-click="false">
      <view class="popup-content">
        <view class="title">分享信息</view>
        <view class="item">
          <text class="label">名称：</text>
          <text>{{ shareData.name }}</text>
        </view>
        
        <view class="item" @click="copyText(shareData.link)">
          <text class="label">分享链接：</text>
          <text class="copyable">{{ shareData.link }}</text>
          <text class="copy-tip">点击复制</text>
        </view>
        
        <view class="item" @click="copyText(shareData.code)">
          <text class="label">分享码：</text>
          <text class="copyable">{{ shareData.code }}</text>
          <text class="copy-tip">点击复制</text>
        </view>

        <button class="close-btn" @click="showPopup = false">关闭</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false,
      shareData: {
        name: "示例分享",
        link: "https://example.com/share/123",
        code: "SHARE2025"
      }
    }
  },
  methods: {
    copyText(text) {
      uni.setClipboardData({
        data: text,
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style>
.popup-content {
  padding: 30rpx;
  background: #fff;
  border-radius: 16rpx;
  width: 600rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  text-align: center;
}
.item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
  display: flex;
  align-items: center;
}
.label {
  font-weight: bold;
  margin-right: 10rpx;
  width: 150rpx;
}
.copyable {
  color: #007AFF;
  flex: 1;
}
.copy-tip {
  font-size: 24rpx;
  color: #999;
  margin-left: 20rpx;
}
.close-btn {
  margin-top: 40rpx;
  background: #007AFF;
  color: white;
}
</style>
